<template>
  <div class="sidebar" :class="{ open: isOpen }">
    <div class="sidebar-header">
      <div class="sidebar-title">对话记录</div>
      <button class="close-sidebar-btn" @click="$emit('close')">×</button>
    </div>
    <ul class="history-list">
      <li v-if="!chatHistory.length" class="no-history">暂无对话记录</li>
      <li
        v-for="(item, index) in chatHistory"
        :key="index"
        class="history-item"
        @click="goToChat(item.character.initials)"
      >
        <div class="history-character" :style="{ color: item.character.color }">{{ item.character.name }}</div>
        <div class="history-preview">{{ item.preview }}</div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { useChatHistory } from '@/composables/useChatHistory';
import { useStore } from 'vuex';

defineProps({
  isOpen: Boolean
});

const emit = defineEmits(['close']);

const { chatHistory } = useChatHistory();
const router = useRouter();
const store = useStore();

const goToChat = (characterInitials) => {
  const session = store.getters['sessions/getSessionByInitials'](characterInitials);
  router.push({ 
    name: 'Chat', 
    params: { 
      initials: characterInitials, 
      sessionId: session?.sessionId 
    }
  })
  emit('close');
};
</script>